import { ref, watch } from 'vue'
import { defineStore } from 'pinia'
import { useTheme } from '@/hooks/useTheme'
import { ElMessage } from 'element-plus'

export const useThemeStore = defineStore(
  'theme',
  () => {
    // 布局模式
    const layout = ref('classic') // classic 经典 | stream 流式 | division 分栏 | fusion 混合

    // element 组件尺寸
    const elSize = ref('small') // small | default | large

    // 主内容布局
    const mainMode = ref('matrix') // matrix 矩阵式 | waterfall 瀑布流

    // 主题风格
    const themeMode = ref('light') // light | dark

    // 主题 primary 颜色
    const primaryColor = ref('#409eff')
    // 监听 primaryColor 改变
    watch(primaryColor, (newColor) => {
      if (newColor) {
        useTheme().setPrimaryColor(newColor)
      } else {
        ElMessage.success('主题色重置为 #409eff')
        primaryColor.value = '#409eff'
      }
    })

    // 若依风格菜单
    const isMenuRuoyi = ref(false) // ruoyi 主题风格，菜单颜色为 #304156

    // 基础圆角尺寸
    const baseRadius = ref(0.25) // 建议 0 ~ 1，单位：rem
    watch(baseRadius, (newRadius) => {
      useTheme().setRadius(newRadius)
    })

    // 基础字体大小
    const baseFontSize = ref(16) // 单位：px
    watch(baseFontSize, (newSize) => {
      useTheme().setFontSize(newSize)
    })

    // 菜单风格
    const menuMode = ref('plain') // radius 圆润 | plain 朴素

    // 菜单折叠
    const isMenuCollapse = ref(false)

    // 菜单手风琴
    const isMenuAccordion = ref(true)

    // 菜单图标
    const isMenuIcon = ref(true)

    // 菜单深色
    const isMenuDark = ref(false)

    // 顶栏深色
    const isHeaderDark = ref(false)

    // 面包屑导航
    const isBreadcrumb = ref(true)

    // 面包屑导航图标
    const isBreadcrumbIcon = ref(true)

    // 标签栏
    const isTabbar = ref(true)

    // 标签栏风格
    const tabbarMode = ref('plain') // rect 方正 | card 卡片 | plain 朴素

    // 标签栏图标
    const isTabbarIcon = ref(true)

    // 页脚
    const isFooter = ref(true)

    // 水印
    const isWatermark = ref(true)

    // 动态标题
    const isDynamicTitle = ref(true)

    // 页面最大化
    const isMaximize = ref(false)

    return {
      layout,
      elSize,
      mainMode,
      primaryColor,
      themeMode,
      isMenuRuoyi,
      baseRadius,
      baseFontSize,
      menuMode,
      isMenuCollapse,
      isMenuAccordion,
      isMenuIcon,
      isMenuDark,
      isBreadcrumb,
      isBreadcrumbIcon,
      isHeaderDark,
      isTabbar,
      tabbarMode,
      isTabbarIcon,
      isFooter,
      isWatermark,
      isDynamicTitle,
      isMaximize,
    }
  },
  {
    persist: true,
  }
)
